<template>
    <div class="card-bg">
        <div id="cards">
            <div class="card" v-for="card in cards" :key="card.id">
                <div class="card-content"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cards: [{ id: 1 }, { id: 2 }, { id: 3 }],
        };
    },
    mounted() {
        this.$nextTick(() => {
            const cardsContainer = this.$el.querySelector("#cards");
            cardsContainer.addEventListener("mousemove", this.handleMouseMove);
        });
    },
    beforeDestroy() {
        const cardsContainer = this.$el.querySelector("#cards");
        cardsContainer.removeEventListener("mousemove", this.handleMouseMove);
    },
    methods: {
        handleMouseMove(e) {
            const cards = this.$el.querySelectorAll(".card");
            cards.forEach((card) => {
                const rect = card.getBoundingClientRect(),
                    x = e.clientX - rect.left,
                    y = e.clientY - rect.top;
                card.style.setProperty("--mouse-x", `${x}px`);
                card.style.setProperty("--mouse-y", `${y}px`);
            });
        },
    },
};
</script>

<style scoped>
:root {
    --bg-color: rgb(20, 20, 20);
    --card-color: rgb(23, 23, 23);
}

.card-bg {
    width: 100%;
    height: 100%;
    background: rgb(20, 20, 20);
}

body {
    align-items: center;
    background-color: var(--bg-color);
    display: flex;
    height: 100vh;
    justify-content: center;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 916px;
    width: calc(100% - 20px);
}

#cards:hover>.card::after {
    opacity: 1;
}

.card {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    height: 260px;
    flex-direction: column;
    position: relative;
    width: 300px;
}

.card::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    z-index: 3;
}

.card:hover::before {
    opacity: 1;
}

.card::before,
.card::after {
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    transition: opacity 500ms;
    width: 100%;
}

.card::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    z-index: 3;
}

.card::after {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
            rgba(255, 255, 255, 0.3),
            transparent 40%);
    z-index: 1;
}

.card>.card-content {
    background-color: var(--card-color);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    inset: 1px;
    padding: 10px;
    position: absolute;
    z-index: 2;
}
</style>
